<template>
  <el-dialog :visible="visible" @close="close" width="70%">

    <div id="heartAnalysis" style="height:400px"></div>
  </el-dialog>
</template>
<script>
import { deviceDetailService } from '@/services';
import echarts from 'echarts';
import utils from '@/utils';
export default {
  name: 'heartDetail',
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
  },
  data () {
      return {
          heart: [],
          heart_theo: [],
          heart_theo_area: [],
      }
  },
  computed: {
    title() {
      return '心跳包详情(近30天)';
    },
  },
  methods: {
    close() {
      this.$emit('update:visible', false);
    },
    async getHeartAnalysis (deviceId) {
      const {heart, heart_theo, heart_theo_area} = await deviceDetailService.queryHeartDetail(deviceId);
      this.heart = heart;
      this.heart_theo = heart_theo;
      this.heart_theo_area = heart_theo_area;
      this.getHeartStateInit();
    },
    getHeartStateInit() {
      var dom = document.getElementById("heartAnalysis");
      var myChart = echarts.init(dom);
      var option;

      option = {
        title: {
          text: '心跳包详情(近30天)',
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            if(params[0].seriesName === '设备实际心跳'){
              var val = params[0].data[1];
              var eve = "";
              if (val === 1) {
                eve = "设备实际心跳";
              } 
              return utils.timestampToTime(params[0].axisValue) + "<br>" + eve;
            } else {
              return "";
            }
          },
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          data: ['设备理论心跳区间','设备实际心跳']
        },
        xAxis: {
          type: 'time',
        },
        yAxis: {
          min: 0,
          max: 3,
          minInterval: 1,
          axisLabel: {
            formatter: function(val) {
              if (val === 4) {
                return "";
              } else if (val === 3) {
                return "";
              } else if (val === 2) {
                return "";
              } else if (val === 1) {
                return "";
              } else {
                return "";
              }
            }
          }
        },
        series: [
          {
            name: '设备理论心跳区间',
            type: 'line',
            smooth: true,
            data: this.heart_theo,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "rgba(255, 173, 177, 0.0)"
                }
              }
            },
            markArea: {
              data: this.heart_theo_area,
            }
          },
          {
            name: '设备实际心跳',
            type: 'line',
            axisLabel: {
              formatter: function(val) {
                return "心跳包";
              }
            },
            itemStyle: {
              normal: {
                color: "#ff0000",
                lineStyle: {
                  color: "#ff0000"
                }
              }
            },
            data: this.heart,
          }
        ]
      };
      myChart.setOption(option);
    },
  },
}
</script>